<template>
  <div class="overview-one">
    <div class="overview-two">
      <div class="overview-img-box">
        <img src="../assets/3.png" width="70%" height="80%" style="margin-left:10px;margin-top:13px;" alt="">
      </div>
      <div class="overview-box1">
          <p>
            <span>{{ user.user_name }}</span>
          </p>
      </div>
      <div class="overview-box1">
        <el-popover placement="bottom-end" triggle='click' width="200" trigger="hover" style="float:left;color: #5cb6ff" v-if="show5_no == false">
          <i class="el-icon-circle-check" style="color: #5cb6ff"></i> &nbsp;&nbsp;您已绑定手机号
          <el-button type='text' size='mini' @click='visibled=false' v-if="show5_no == false"></el-button>
          <i class="el-icon-mobile" slot="reference"></i>
        </el-popover>
        <el-popover placement="bottom-end" triggle='click' width="300" trigger="hover" style="float:left;" v-if="show5_no == true">
          手机号未绑定
          <el-button type='text' size='mini' @click='visibled=false' v-if="show5_no == false">更换手机号</el-button>
          <i class="el-icon-mobile" slot="reference"></i>
        </el-popover>

        <el-popover placement="bottom-end" triggle='click' width="300" trigger="hover" style="float:left;" v-if="show == false">        
          请完成实名认证并开通存管账户
          <el-button type='text' size='mini' @click='visibled9' v-if="show == false">立即认证</el-button>
          <i class="el-icon-user-solid" style="margin-left:20px;" slot="reference"></i>
        </el-popover>
        <el-popover placement="bottom-end" triggle='click' width="250" trigger="hover" style="float:left;color: #5cb6ff" v-if="show == true">        
           <i class="el-icon-circle-check" style="color: #5cb6ff"></i> &nbsp;&nbsp;已完成实名认证并开通存管账户
          <el-button type='text' size='mini' @click='visibled9' v-if="show == true"></el-button>
          <i class="el-icon-user-solid" style="margin-left:20px;" slot="reference"></i>
        </el-popover>

        <el-popover placement="bottom-end" triggle='click' width="300" trigger="hover" style="float:left;" v-if="show3_no == false">    
          请开通存管账户
          <el-button type='text' size='mini' @click='visibled' v-if="show3_no == false">立即开通</el-button>    
          <i class="el-icon-success" style="margin-left:20px;" slot="reference"></i>
        </el-popover>
        <el-popover placement="bottom-end" triggle='click' width="300" trigger="hover" style="float:left;color: #5cb6ff" v-if="show3_no == true">    
           <i class="el-icon-circle-check" style="color: #5cb6ff"></i> &nbsp;&nbsp;已开通存管账户
          <el-button type='text' size='mini' @click='visibled=false' v-if="show3_no == true"></el-button>    
          <i class="el-icon-success" style="margin-left:20px;" slot="reference"></i>
        </el-popover>

        <el-popover placement="bottom-end" triggle='click' width="300" trigger="hover" style="float:left;" v-if="show4_no == true">        
          请开通存管账户并设置交易密码
          <el-button type='text' size='mini' @click='visibled2' v-if="show4_no == true">立即设置</el-button>
          <i class="el-icon-unlock" style="margin-left:20px;" slot="reference"></i>
        </el-popover>
        <el-popover placement="bottom-end" triggle='click' width="300" trigger="hover" style="float:left;color: #5cb6ff" v-if="show4_no == false">        
           <i class="el-icon-circle-check" style="color: #5cb6ff"></i> &nbsp;&nbsp;已开通存管账户并设置交易密码
          <el-button type='text' size='mini' @click='visibled3' v-if="show4_no == false">修改交易密码</el-button>
          <i class="el-icon-unlock" style="margin-left:20px;" slot="reference"></i>
        </el-popover>

        <el-popover placement="bottom-end" triggle='click' width="300" trigger="hover" style="float:left;" v-if="show1_no == false">      
          请设置登录密码
          <el-button type='text' size='mini' @click='visibled4' v-if="show1_no == false">立即设置</el-button>  
          <i class="el-icon-umbrella" style="margin-left:20px;" slot="reference"></i>
        </el-popover>
        <el-popover placement="bottom-end" triggle='click' width="300" trigger="hover" style="float:left;color: #5cb6ff" v-if="show1_no == true">      
           <i class="el-icon-circle-check" style="color: #5cb6ff"></i> &nbsp;&nbsp;已设置登录密码
          <el-button type='text' size='mini' @click='visibled4' v-if="show1_no == true">修改登录密码</el-button>  
          <i class="el-icon-umbrella" style="margin-left:20px;" slot="reference"></i>
        </el-popover>

      

       

        <span style="margin-left:30px;float:left;">安全级别</span>
        <el-rate v-model="value" :colors="colors"> </el-rate>
      </div>
    </div>

    <div class="overview-three">
      <div class="view-box2">
          <span style="font-size:15px;color:grey;margin-left:60px;">可用余额</span>
      </div>
      <div class="view-box3">
          <span style="font-size:27px;color:#FF2A3A;margin-left:30px;">{{ user.user_balance }}元</span>
          <el-button style="color:white; border:none;background-color: red; margin-left:30px;" class="view3-3" @click="Recharge()">充值</el-button>
          <el-button style="color:red; border-color:red;background-color: white;" class="view3-3" @click="Withdraw()">提现</el-button>
      </div>
      <div class="view-box4">
          <div class="small-box">
              <span style="font-size:15px;color:grey;margin-left:70px;">总资产</span>
              <br/>
              <br/>
              <span style="font-size:20px;margin-left:60px;">{{ property }}元</span>
          </div>
          <div class="small-box">
              <span style="font-size:15px;color:grey;margin-left:70px;">投资中本金</span>
              <br/>
              <br/>
              <span style="font-size:20px;margin-left:60px;">{{ principal }}元</span>
          </div>
           <div class="small-box1">
              <span style="font-size:15px;color:grey;margin-left:70px;">预计总投资年收益</span>
              <br/>
              <br/>
              <span style="font-size:20px;margin-left:80px;">{{ earnings }}元</span>
          </div>
      </div>
    </div>

    <div class="overview-four">
           <div class="overview-five">
               <div class="overview-row">
                  <span style="font-size:18px;">日期：</span>
                    <el-date-picker
                      v-model="startDate"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      type="date"
                      style="width:16%;margin-left:13px;"
                      @change="queryDate()"
                  >
                  </el-date-picker>
                  -
                  <el-date-picker
                      v-model="endDate"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      type="date"
                      style="width:16%;"  
                      @change="queryDate()"
                  >
                  </el-date-picker>
                  <el-button style="margin-left:12px;color:white;background-color: red;border:none;" @click="queryDate(all)">全部</el-button>
                  <el-button style="border:none;background-color: rgb(224, 222, 222);" class="el-overview"  @click="queryDate(week)">最近7天</el-button>
                  <el-button style="border:none;background-color: rgb(224, 222, 222);" class="el-overview"  @click="queryDate(month)">最近1个月</el-button>
                  <el-button style="border:none;background-color: rgb(224, 222, 222);" class="el-overview"  @click="queryDate(threeMonth)">最近3个月</el-button>
              </div>

              <div class="overview-row">
                  <span style="font-size:18px;">类型：</span>
                  <el-button style="margin-left:13px;color:white;background-color: red; border:none;" @click="queryType(all)">全部</el-button>
                  <el-button style="border:none;background-color:rgb(224, 222, 222);" class="el-overview" @click="queryType(car)">车贷</el-button>
                  <el-button style="border:none;background-color:rgb(224, 222, 222);" class="el-overview" @click="queryType(house)">房贷</el-button>
                  <el-button style="border:none;background-color:rgb(224, 222, 222);" class="el-overview" @click="queryType(manage)">经营贷</el-button>
                  <el-button style="border:none;background-color:rgb(224, 222, 222);" class="el-overview" @click="queryType(consumption)">消费贷</el-button>
              </div>
           </div>

           <el-table
              style="width: 100%; margin-top: 30px"
              :header-cell-style="{ background: 'silver', color: '#606266' }"
              :data="list.slice((currentPage - 1) * pagesize, currentPage * pagesize)">
              <el-table-column width="50"></el-table-column>
              <el-table-column label="时间" width="130px" prop="investment_date"></el-table-column>
              <el-table-column label="投资名称" width="150px" prop="investment_name"></el-table-column>
              <el-table-column label="投资金额" width="150px" prop="investment_money">
                  <template slot-scope="scope">
                      {{ scope.row.investment_money}}元
                  </template>
              </el-table-column>
              <el-table-column label="年利率收益" width="160px" prop="investment_rate">
                  <template slot-scope="scope">
                      {{ scope.row.investment_rate}}%
                  </template>
              </el-table-column>
              <el-table-column label="状态" width="150px" prop="investment_status">
                  <template slot-scope="scope">
                      {{ scope.row.investment_status==1 ? "投资中":"已完成"}}
                  </template>
              </el-table-column>
             
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[3, 6, 9, 12, 15]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            style="margin-top: 20px; margin-left: 150px;"
            :total="list.length"
            >
          </el-pagination>
    </div>

  </div>
</template>

<script>
import axios from 'axios';
export default {
  data () {
    return {
      user:[],
      property:"",   //总资产
      principal:"",  //投资中本金
      earnings:"",    //预计总投资年收益
      currentPage: 1, //初始页
      pagesize: 3, //每页条数
      list:[],
      all:"",   //全部
      car: 1, //车贷
      house: 2, //房贷
      manage: 3, //经营贷
      consumption: 4, //消费贷
      week:2,    //7天
      month:3,       //一个月
      threeMonth:4,  //3个月
      startDate:"",   //开始时间
      endDate:"",      //结束时间
      show:null,
      show1_no:null,
      show2_no:null,
      show3_no:null,
      show4_no:null,
      show5_no:null,
      value:0
    }
  },
  created () {
    this.findUserList();
    this.findList();
    this.getSumPrice();
    this.queryUserInfo();
  },
  methods: {
    visibled9(){
this.$router.push({path:'ID1'});
    },
    visibled(){
      this.$router.push({path:'TransactionPassword5'});
    },
    visibled2(){
      this.$router.push({path:'Password2'});
    },
    visibled3(){
      this.$router.push({path:'Password2'});
    },
     visibled4(){
      this.$router.push({path:'Phone4'});
    },
    visibled5(){
      this.$router.push({path:'Mailbox3'});
    },
    findUserList() {
      axios({
        url: "/api/user/selectUserEntity",
      }).then((res) => {
        console.log(res);
        this.user = res.data;
      })
    },
    findList() {
      axios({
          url: "/api/recordinves/getRecordInvesList",
      }).then((res) => {
          console.log(res);
          this.list = res.data;
      })
    },
    getSumPrice() {
        axios({
            url:"/api/user/sumPrice",
        }).then((res) => {
            console.log(res);
            this.property = res.data.data;
        });

        axios({
            url:"/api/user/sumMoney",
        }).then((res) => {
            console.log(res);
            this.principal = res.data.data;
        });

        axios({
            url:"/api/user/sumCountMoney",
        }).then((res) => {
            console.log(res);
            this.earnings = res.data.data;
        });
      },
      queryUserInfo() {
        axios({
          url:"/api/query/queryUserCard",
        }).then((res) => {
          console.log(res);
          this.show = res.data;
          if(res.data==true){
          this.value=this.value+1
        }
        });
        axios({
          url:"/api/query/queryUserPwd",
        }).then((res) => {
          console.log(res);
          this.show1_no = res.data;
          if(res.data==true){
          this.value=this.value+1
        }
        });
        axios({
          url:"/api/query/queryUserBox",
        }).then((res) => {
          console.log(res);
          this.show2_no = res.data;
        });
        axios({
          url:"/api/query/queryUserBankCard",
        }).then((res) => {
          console.log(res);
          this.show3_no = res.data;
          if(res.data==true){
          this.value=this.value+1
        }
        });
        axios({
          url:"/api/query/queryUserWith",
        }).then((res) => {
          console.log(res);
          this.show4_no = res.data;
          if(res.data==false){
          this.value=this.value+1
        }
        });
        axios({
          url:"/api/query/queryUserPhone",
        }).then((res) => {
          console.log(res);
          this.show5_no = res.data;
           if(res.data==false){
          this.value=this.value+1
        }
        });
      },
     //类型条查
        queryType(overviewType) {
            // alert(overviewType)
            axios({
                url: "/api/recordinves/getRecordInvesList",
                params: {
                    investment_type: overviewType,
                },
            }).then((res) => {
                console.log(res);
                this.list = res.data;
            });
        },
        //最近7天，一个月，三个月条查,和时间条查
        queryDate(overviewTime) {
            // alert(overviewTime)
            axios({
                url: "/api/recordinves/getRecordInvesList",
                params: {
                    typeDate: overviewTime,
                    startDate: this.startDate,
                    endDate: this.endDate,
                },
            }).then((res) => {
                console.log(res);
                this.list = res.data;
            });
    },
    handleSizeChange(size) {
      console.log(size, "size");
      this.pagesize = size;
      console.log(this.pagesize); //每页下拉显示数据
    },
    handleCurrentChange(currentPage) {
      console.log(currentPage, "currentPage");
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },
    Recharge() {
      // alert(1234)
      this.$router.push({path:'Recharge4'});
    },
    Withdraw() {
        this.$router.push({path:'Withdrawal5'});
    },
  },
}
</script>

<style>
.overview-one{
  width: 100%;
  height: 100%;
  float: left;
  background-color: #F6F6F6;
}
.overview-two{
  width: 100%;
  float: left;
  background-color: white;
  height: 130px;
}
.overview-three{
  width: 100%;
  float: left;
  background-color: white;
  height: 280px;
  margin-top: 20px;
}
.overview-four{
  width: 100%;
  height: 700px;
  float: left;
  margin-top: 18px;
  background-color: white;
  padding-left: 50px;
}
.overview-img-box{
  width: 16%;
  height: 130px;
  margin-left: 20px;
  float: left;
  /* background-color: bisque; */
}
.overview-box1{
  width: 75%;
  float: left;
  height: 30px;
  /* background-color: bisque; */
  margin-top: 3%;
  margin-left: 2%;
}
.view-box2{
  width: 100%;
  height: 50px;
  padding-top: 20px;
}
.view-box3{
  width: 94%;
  height: 80px;
  /* background-color: bisque; */
  border-bottom: 1px solid rgb(224, 222, 222);
  margin-left: 3%;
}
.view3-3{
  width:120px;
}
.view3-3:hover{
  background-color: red !important;
	color: #FFFFFF !important;
}
.view-box4{
  width: 100%;
  height: 129px;
}
.small-box{
  width: 30%;
  height: 70%;
  border-right: 1px solid rgb(224, 222, 222);
  margin-top: 14px;
  float: left;
  padding-top: 10px;
}
.small-box1{
  width: 30%;
  height: 70%;
  margin-top: 14px;
  float: left;
  padding-top: 10px;
}
.overview-five{
  width: 100%;
  height: 150px;
  /* background-color: rebeccapurple; */
  float: left;
}
.overview-row{
   width: 100%;
   height: 60px;
   float: left;
   padding-top: 10px;
}
.el-overview:hover{
  color: red !important;
}
</style>